<template>
    <div>
        <el-form-item :label="attrName" v-if="fieldType == 1">
            <el-input v-model="formItem.value" clearable></el-input>
        </el-form-item>
        <el-form-item :label="attrName" v-if="fieldType == 2">
            <el-select v-model="formItem.value" clearable filterable :multiple="multiFlag">
                <el-option v-for="item in fieldOptions" :value="item.id" :label="item.name" :key="item.id">

                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item :label="attrName" v-if="fieldType == 3">
            <el-date-picker :type="dateType" v-model="formItem.value" range-separator="至" start-placeholder="开始日期"
                end-placeholder="结束日期">
            </el-date-picker>
        </el-form-item>
        
        
        <el-form-item :label="attrName" v-if="fieldType == 4">
            <div class="img-container">
                <div class="img-wrapper" v-for="(item, index) in formItem.value">
                    <el-image fit="cover"  :src="item" :key="item" :preview-src-list="formItem.value"></el-image>
                    <i @click="delImg(index)" class="el-icon-close"></i>
                </div>
                <UploadImg :limit="imgNum-formItem.value.length" v-show="formItem.value.length<imgNum" @uploadFileList="getUrl" folder="order/attr/image">
                    <i class="el-icon-plus"></i>
                </UploadImg>
            </div>
        </el-form-item>
        <el-form-item :label="attrName" v-if="fieldType == 5">
            <div class="video-container">
                <div v-if="formItem.value" class="video-wrapper">
                    <video controls width="300" height="200" :src="formItem.value">
            
                    </video>
                    <i @click="delVideo" class="el-icon-close"></i>
                </div>
                <UploadImg v-else @uploadFileList="getUrl" accept=".mp4,.m2v,.mkv" folder="order/attr/video">
                        <i class="el-icon-video-camera"></i>
                </UploadImg>
            </div>
            
        </el-form-item>
        <el-form-item :label="attrName" v-if="fieldType == 6">
            <el-radio-group v-model="formItem.value" >
                <el-radio v-for="(item, index) in fieldOptions" :label="item.id||item" :key="index">
                    {{ item.name||item }}
                </el-radio>
            </el-radio-group>
        </el-form-item>

        <el-form-item :label="attrName" v-if="fieldType ==7">
            <el-input readonly v-model="formItem.address"></el-input>
        </el-form-item>

        <el-form-item :label="attrName" v-if="fieldType==8">
            <audio Controls :src="formItem.value"></audio>
        </el-form-item>
    </div>
</template>

<script>
import UploadImg from "@/components/UploadImg"
export default {
    components:{
        UploadImg
    },
    props: {
        formItem: {
            type: Object,
            default: () => { }
        }
    },
    data() {
        return {
            fieldType: "",
            fieldOptions: [],
            dateType: "datetime",
            attrName: "",
            multiFlag:"",
            imgNum:5,
        }
    },
    watch: {
        formItem: {
            handler(item) {
                this.fieldType = item.fieldType
                this.requiredFlag = item.requiredFlag
                this.multiFlag = item.multiFlag
                this.attrName = item.attrName
                if(item.fieldOptions){
                    this.fieldOptions = JSON.parse(item.fieldOptions) || []
                }
                switch (this.fieldType) {
                    case 2:
                        
                        if(this.fieldOptions.length){
                            item.value = Number(item.value)||''
                        }else{
                            this.fieldOptions = [{id:item.value,name:item.value}]
                        }
                        break
                    case 3:
                        if (item.value) {
                            if (this.multiFlag) {
                                item.value = item.value.split(",").map(it => it ? new Date(it) : "")
                            } else {
                                item.value = new Date(item.value)
                            }
                        }
                        if (this.multiFlag) {
                            item.value = item.value || []
                            this.dateType = 'datetimerange'
                        }

                        break
                    case 4:
                        if (item.value) {
                            item.value = item.value.split(",")
                        } else {
                            item.value = []
                        }
                        break
                    case 5:
                        // this.fieldOptions = JSON.parse(item.fieldOptions) || []
                        break
                    case 6:
                        if(typeof this.fieldOptions[0]=='object'){
                            item.value = Number(item.value)
                        }
                        break
                        
                    case 7:
                        item.address = ""
                        if(item.value){
                            item.address = JSON.parse(item.value).address
                        }
                        break
                }
            },
            immediate:true
        }
    },
    methods: {
        delImg(index){
            this.formItem.value.splice(index,1)
        },
        delVideo(){
            this.formItem.value=""
        },
        getUrl(val){
            if(val.length>0){
                if(this.fieldType==4){
                    this.formItem.value.push(val[0])
                }else if(this.fieldType==5){
                    this.formItem.value = val[0]
                }
                
                this.$Utils.notifySuccess("上传成功")
            }
        }
    },
}
</script>

<style lang="scss" scoped>
    .el-form-item{
        width: 98%;
        margin:0 auto;
        margin-bottom: 5px;
        ::v-deep .el-form-item__content{
            width: 76%;
            &>div{
                width: 100%;
            }
        }
    }
    .img-container,.video-container{
        display: flex;
        flex-wrap: wrap;
        .img-wrapper,.video-wrapper{
            flex: none;
            position: relative;
            .el-icon-close{
                position: absolute;
                top: -2px;
                right: 0px;
                font-size: 24px;
            }
            &::before{
                display: table;
                content:"";
            }
            .el-image{
                width: 120px;
                height: 120px;
                vertical-align: bottom;
                margin: 6px 10px 10px 0;
            }

        }
        
        ::v-deep .el-upload-dragger{
            width: 120px !important;
            height: 120px;
            line-height: 120px;
            font-size: 30px;
            margin-top: 6px;
        }
    }
</style>